<template>
  <a-spin :spinning="loading">
    <div>
      <a-form-model
        class="fromModels"
        ref="allpeopleModel"
        layout="vertical"
        :labelCol="{ span: 10 }"
        :wrapperCol="{ span: 14 }"
      >
        <a-form-model-item label="全民分红开关">
          <a-radio-group v-model="status">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="0"> 关 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="税费费率">
          <a-input v-model="config.tax_rate">
            <div slot="addonAfter">万</div>
          </a-input>
        </a-form-model-item>

        <div class="allcards" v-for="(item, index) in config.rebate" :key="index">
          <div class="allcards_items">
            <div class="allcards_blocks">
              <a-form-model-item label="名称">
                <a-input v-model="item.name"></a-input>
              </a-form-model-item>
            </div>
            <div class="allcards_blocks">
              <a-form-model-item label="费率">
                <a-input v-model="item.val"></a-input>
              </a-form-model-item>
            </div>
          </div>
          <div class="allcards_title">达标条件一</div>
          <div class="allcards_items">
            <div class="allcards_blocks">
              <a-form-model-item label="最低">
                <a-input v-model="item.condition1.min_amount"></a-input>
              </a-form-model-item>
            </div>
            <div class="allcards_blocks">
              <a-form-model-item label="最高">
                <a-input v-model="item.condition1.max_amount"></a-input>
              </a-form-model-item>
            </div>
          </div>
          <div class="allcards_title">达标条件二</div>
          <div class="allcards_items">
            <div class="allcards_blocks">
              <a-form-model-item label="直推团队">
                <a-input v-model="item.condition2.num"></a-input>
              </a-form-model-item>
            </div>
            <div class="allcards_blocks">
              <a-form-model-item label="金额">
                <a-input v-model="item.condition2.amount"></a-input>
              </a-form-model-item>
            </div>
          </div>
        </div>

        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="whites">提交</a-button>
          <a-button type="primary" @click="getPrivacyAgreementInfo">重置</a-button>
          <a-button type="primary" @click="lineChanges('rebate', 'add')">新增一行</a-button>
          <a-button type="primary" @click="lineChanges('rebate', 'del')">删除最后一行</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-spin>
</template>

<script>
import { getRebateApi, setRebateApi } from '@/api/return.js'
export default {
  name: 'allpeople',

  data() {
    return {
      loading: false,
      config: {
        rebate: [],
        tax_rate: ''
      },
      status: 1
    }
  },
  created() {
    this.getPrivacyAgreementInfo()
  },
  methods: {
    lineChanges(key, type) {
      if (type == 'add') {
        this.config[key].push({
          val: '',
          name: '',
          condition1: {
            max_amount: '',
            min_amount: ''
          },
          condition2: {
            amount: '',
            num: ''
          }
        })
      }
      if (type == 'del') {
        this.config[key].splice(this.config[key].length - 1, 1)
      }
    },

    getPrivacyAgreementInfo() {
      this.loading = true
      getRebateApi({
        type: 'all_people_rebate',
        brand_id: process.env.VUE_APP_BRAND_ID
      })
        .then(res => {
          this.config = res.data.config
          this.status = res.data.status
        })
        .finally(() => {
          this.loading = false
        })
    },
    whites() {
      this.setDatas()
    },
    setDatas() {
      setRebateApi({
        type: 'all_people_rebate',
        brand_id: process.env.VUE_APP_BRAND_ID,
        status: this.status,
        data: this.config
      }).then(res => {
        this.getPrivacyAgreementInfo()
        this.$message.success('操作成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.allcards {
  width: 70%;
  border: 1px solid #e8e8e8;
  padding: 25px 25px 0;
  margin: 0 auto 20px;
  border-radius: 4px;
  .allcards_items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .allcards_blocks {
      width: 46%;
    }
  }
}
</style>
